<template>
  <div>
    <!-- 基本属性 -->
    <div class="style-basic">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-input type="number" size="mini" v-model.number="item.x">
            <template slot="prepend">x:</template>
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-input type="number" size="mini" v-model.number="item.y">
            <template slot="prepend">y:</template>
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-input type="number" size="mini" v-model.number="item.w">
            <template slot="prepend">宽:</template>
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-input type="number" size="mini" v-model.number="item.h">
            <template slot="prepend">高:</template>
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-input type="number" size="mini" v-model.number="item.z">
            <template slot="prepend">z:</template>
          </el-input>
        </el-col>
      </el-row>

    </div>
    <el-divider/>
    <el-form label-width="80px">
      <el-form-item label="容器">
        <el-select v-model="item.parent" clearable style="width: 90%" @change="handleParentChange">
          <el-option v-for="c in containers" :value="c.uuid" :label="widgetTitle(c.type)+'['+c.uuid+']'"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-divider/>
    <!--组件样式-->
    <div class="style-widget">
      <component v-if="widgetStyleName" :is="widgetStyleName" :item="item"/>
    </div>


  </div>
</template>
<script>
  import vpd from '../../mixins/vpd';
  import widgets from '../../../widgets';

  export default {
    mixins: [vpd],
    props: {
      item: {
        default() {
          return {}
        },
        type: Object
      }
    },
    computed: {
      widgetsStore() {
        return this.$vpd.state.widgets;
      },
      // 容器
      containers() {
        return this.widgetsStore
          .filter(item => {
            return item.isContainer
              && item.uuid !== this.item.uuid
              && !item.parent;
          });
      },
      widgetStyleName() {
        if (this.item && this.item.type) {
          return this.item.type + '-style';
        }
      }
    },
    watch: {
      'item.parent': function (val, oldVal) {
        if (val) { //设置到某容器内部时，修改坐标为容器内的坐标
          this.item.x = 10;
          this.item.y = 10;
        } else if (oldVal) { //移除容器后， 修改坐标放在原容器附近
          const oldParent = this.widgetsStore.find(item => item.uuid === oldVal);
          if (oldParent) {
            this.item.x = oldParent.x - 50;
            this.item.y = oldParent.y - 50;
          }
        }
      }
    },
    data() {
      return {}
    },
    beforeMount() {
      // this.data = this.item
    },
    methods: {
      widgetTitle(type) {
        return widgets.getTitle(type);
      },
      handleParentChange(val) {

      }
    }

  }
</script>
<style lang="scss">
  .style-basic {
    padding: 0 5px;

    label {
      display: inline-block;
      width: 20px;
    }

    .el-input {
      width: 100%;
      margin-bottom: 5px;
    }

    .el-input-group__prepend {
      padding: 0;
      width: 40px;
      text-align: center;
    }

    .el-input__inner {
      text-align: center;
      padding-right: 0;
    }
  }

  .style-widget {
    .el-form-item {
      margin-bottom: 10px !important;
    }


  }

</style>
